<!DOCTYPE html>
<html>
<head>
    <style>
        p
        {
            border: 5px solid #0bc511dd;
            width: 100px;
            margin: 15px;
        }
        
        p.relative
        {
            position: relative;
            top: 15px;
            left: 30px;
        }
        p#myclass
        {
            position: relative;
            top: 30px;
            width: 400px;
        }
    </style>
    <meta charset="UTF-8" />
    <title>相对定位</title>
</head>
<body>
    <!-- relative -->
     <p>第一段文字</p>
     <p class="relative">第二段文字</p>
     <p>第三段文字</p>
     <p id="myclass">相对定位不脱离文档流(离最近的文本进行定位)</p>
</body>
</html>